<template>
  <el-container>
    <el-header class="logo" height="80px">
      <img alt="node" src="../assets/logo.svg" />
    </el-header>
    <el-main style="padding: 0;">
      <el-menu
        background-color="#314053"
        text-color="#fff"
        style="text-align: left;"
        router=true
        :default-active="$route.path"
      >
        <el-menu-item index="/serviceList" route>
          <i class="el-icon-s-home"></i>
          <span>服务列表</span>
        </el-menu-item>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-setting" style="color: #fff"></i>
            <span>项目配置</span>
          </template>
          <el-menu-item v-for="item in menuList" :key="item.name" :index="item.router">
            <span>{{ item.name }}</span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item index="/configView">
          <i class="el-icon-setting"></i>
          <span>服务配置</span>
        </el-menu-item>
        <el-menu-item index="/config">
          <i class="el-icon-setting"></i>
          <span>配置文件</span>
        </el-menu-item>
      </el-menu>
    </el-main>
  </el-container>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { getConfig, configEmitter } from "../init";
import { Config } from "../typing";

@Component
export default class Menu extends Vue {
  public menuList: MenuItem[] = [];

  constructor(...args: any) {
    super(...args);
    getConfig().then((config: Config) => {
      this.setMenuList(config);
    });
    configEmitter.on("update", (config: Config) => {
      while (this.menuList.length !== 0) {
        this.menuList.pop();
      }
      this.setMenuList(config);
    });
  }

  public setMenuList(config: Config) {
    for (const name in config.service) {
      if (config.service[name].menuName) {
        this.menuList.push({
          router: `/serviceConfig/${  name }/${ config.service[name].mode }`,
          name: config.service[name].menuName,
        });
      }
    }
  }
}

interface MenuItem {
  router: string;
  name: string;
}
</script>

<style scoped>
.logo {
  margin: 15px;
}

.logo img {
  height: 80px;
}

.el-menu {
  border-right: 0;
}

.el-menu-item {
  border-bottom: 1px #394b62 solid;
}

.el-menu-item i {
  color: #fff;
}
</style>